<template>
  <view class="content-box commonDiv">
    <u-navbar
      leftText="返回"
      title="本次检查实况"
      :safeAreaInsetTop="true"
      @leftClick="backPre"
      >
        <view
          class="u-nav-slot"
          slot="right"
          @click="backTo"
        >
        <view class="icon iconfont icon-shouye" style="font-weight: 600;"></view>
      </view>
    </u-navbar>
    <view class="box-inner" @click="toLink(1)">
        <view class="title">第一项</view>
        <view class="charts-box">
            <qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" :loadingType="3"/>
        </view>
    </view>
    <view class="box-inner" @click="toLink(2)">
        <view class="title">第二项</view>

        <view class="charts-box">
            <qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" :loadingType="3"/>
        </view>
    </view>
    <view class="box-inner"  @click="toLink(3)">
        <view class="title">第三项</view>

        <view class="charts-box">
         <qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" :loadingType="3"/>
        </view>
    </view>
  </view>
</template>
<script>
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  data() {
    return {
      chartData1: {},
      chartData2: {},
      chartData3: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc"
        ],
        padding: undefined,
        title: {
          name: "234/332",
          fontSize: 20,
          color: "#01579B"
        },
        subtitle: {
          name: "已完成/全部",
          fontSize: 14,
          color: "#666666"
        },
        extra: {
          arcbar: {
            type: "default",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom"
          }
        }
      },
      opts2: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc"
        ],
        padding: undefined,
        title: {
          name: "234/332",
          fontSize: 20,
          color: "#0D47A1"
        },
        subtitle: {
          name: "已完成/全部",
          fontSize: 14,
          color: "#666666"
        },
        extra: {
          arcbar: {
            type: "default",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom"
          }
        }
      },
      opts3: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc"
        ],
        padding: undefined,
        title: {
          name: "234/332",
          fontSize: 20,
          color: "#004D40"
        },
        subtitle: {
          name: "已完成/全部",
          fontSize: 14,
          color: "#666666"
        },
        extra: {
          arcbar: {
            type: "default",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2,
            linearType: "custom"
          }
        }
      },
    };
  },
  onShow() {
    this.getServerData();
    this.getRate()
  },
  methods: {
    backPre(){
      uni.navigateBack({
        delta: 1 // delta值为1时表示返回上一级页面
      })
    },
    backTo(){
      uni.reLaunch({
        url: '/pages/home/index'
      })
    },
    getRate(){
      mRequest.getStudentProjectRate({
        inspectId:hccmStore.getChooseInspectId()
      }).then(res=>{
        console.log(res.data)
        res.data.map(item=>{
          if(item.projectName === '第一项'){
            let res = {
              series: [
                {
                  name: "完成率",
                  color: "#2fc25b",
                  data: item.finished / item.all
                }
              ]
            };
            this.chartData1 = JSON.parse(JSON.stringify(res));
            this.opts1.title.name = `${item.finished} / ${item.all}`
          } else if(item.projectName === '第二项'){
            let res = {
              series: [
                {
                  name: "完成率",
                  color: "#2fc25b",
                  data: item.finished / item.all
                }
              ]
            };
            this.opts2.title.name = `${item.finished} / ${item.all}`
            this.chartData2 = JSON.parse(JSON.stringify(res));
          } else if(item.projectName === '第三项'){
            let res = {
              series: [
                {
                  name: "完成率",
                  color: "#2fc25b",
                  data: item.finished / item.all
                }
              ]
            };
            this.chartData3 = JSON.parse(JSON.stringify(res));
            this.opts3.title.name = `${item.finished} / ${item.all}`
          }
        })
      })
    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              name: "完成率",
              color: "#2fc25b",
              data: 0.1
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
        console.log(this.chartData);
      }, 1500);
    },
    toLink(val){
      uni.navigateTo({
        url: `/pages/home/facts/detail?activeProject=${val}`
      });
    }
  }
};
</script>

<style lang="scss">
.content-box {
  width: 100%;
  padding: 100px 20px 30px;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .box-inner{
    width: 180px;
    height: 180px;
    padding: 20px;
    box-shadow: 0 1px 10px $u-primary-disabled;
    background: #f5f5f5;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title{
        font-size: 20px;
        font-weight: 600;
        padding: 10px 0;
        background-image: -webkit-linear-gradient(60deg, $u-primary, $u-success);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .charts-box {
        width: 140px;
        height: 140px;    
    }
  }
}
</style>